<template>
  <div class="container">
    <div class="container-title">
      {{ state.roomValue.floor }}楼{{ state.roomValue.roomNumber }}室
    </div>
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      :inline="true"
      class="container-form"
      label-position="left"
    >
      <el-form-item label="卫生费:">
        <el-input
          v-model="form.health"
          placeholder="请输入且必须是数字"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item label="管理费:">
        <el-input
          v-model="form.management"
          placeholder="请输入且必须是数字"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item label="电梯费:">
        <el-input
          v-model="form.elevator"
          placeholder="请输入且必须是数字"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="公摊电费:"
        placeholder="请输入并必须是数字"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
        <el-input
          v-model="form.sharedElecty"
          placeholder="请输入且必须是数字"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></el-input>
      </el-form-item>
      <el-form-item label="上月抄电数:" prop="lastElectyNumber">
        <el-input
          v-model="form.lastElectyNumber"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="本月抄电数:" prop="theElectyNumber">
        <el-input
          v-model="form.theElectyNumber"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="上月抄水数:" prop="lastWaterNumber">
        <el-input
          v-model="form.lastWaterNumber"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="本月抄水数:" prop="theWaterNumber">
        <el-input v-model="form.theWaterNumber" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <div>
      <el-button
        class="container-but"
        type="primary"
        @click="onSubmit(ruleFormRef)"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script lang="ts">
import { roomCostInfo } from "@/api";
import { defineComponent, onMounted, reactive, ref, watchEffect } from "vue";
import { ElMessage } from "element-plus";

interface formData {
  floor: string;
  roomNumber: string;
  roomId: string;
  health: number | undefined;
  management: number | undefined;
  elevator: number | undefined;
  sharedElecty: number | undefined;
  lastElectyNumber: number | undefined;
  theElectyNumber: number | undefined;
  lastWaterNumber: number | undefined;
  theWaterNumber: number | undefined;
  year: number | undefined;
  month: number | undefined;
  createTime: string;
}

export default defineComponent({
  components: {},
  props: {
    roomValue: {
      require: true,
      type: Object,
    },
  },
  setup(props, context) {
    const form: formData = reactive({
      floor: "",
      roomNumber: "",
      roomId: "",
      health: undefined,
      management: undefined,
      elevator: undefined,
      sharedElecty: undefined,
      lastElectyNumber: undefined,
      theElectyNumber: undefined,
      lastWaterNumber: undefined,
      theWaterNumber: undefined,
      year: undefined,
      month: undefined,
      createTime: "",
    });
    const state = reactive({
      roomValue: {} as any,
    });
    const ruleFormRef = ref<any>();
    const rules = reactive({
      lastElectyNumber: [
        {
          required: true,
          pattern: new RegExp(/^[\d]/, "g"),
          message: "请输入且是数字",
          trigger: "change",
        },
      ],
      theElectyNumber: [
        {
          required: true,
          pattern: new RegExp(/^[\d]/, "g"),
          message: "请输入且是数字",
          trigger: "change",
        },
      ],
      lastWaterNumber: [
        {
          required: true,
          pattern: new RegExp(/^[\d]/, "g"),
          message: "请输入且是数字",
          trigger: "change",
        },
      ],
      theWaterNumber: [
        {
          required: true,
          pattern: new RegExp(/^[\d]/, "g"),
          message: "请输入且是数字",
          trigger: "change",
        },
      ],
    });
    watchEffect(() => {
      state.roomValue = props.roomValue;
      form.roomId = state.roomValue.roomId;
      form.floor = state.roomValue.floor;
      form.roomNumber = state.roomValue.roomNumber;
    });
    const onSubmit = async (ruleFormRef: any) => {
      if (!ruleFormRef) return;
      await ruleFormRef.validate((valid: any) => {
        if (valid) {
          console.log("submit!");
          if (form.health == undefined) form.health = 0;
          if (form.management == undefined) form.management = 0;
          if (form.elevator == undefined) form.elevator = 0;
          if (form.sharedElecty == undefined) form.sharedElecty = 0;
          if (form.year == undefined) form.year = 0;
          if (form.month == undefined) form.month = 0;
          else {
            roomCostInfo(form)
              .then((res) => {
                if (res === 1) {
                  ElMessage.success("添加成功！");
                }
                if (res === 2) {
                  ElMessage.success("修改成功！");
                }
                form.floor = "";
                form.roomNumber = "";
                form.roomId = "";
                form.health = undefined;
                form.management = undefined;
                form.elevator = undefined;
                form.sharedElecty = undefined;
                form.lastElectyNumber = undefined;
                form.theElectyNumber = undefined;
                form.lastWaterNumber = undefined;
                form.theWaterNumber = undefined;
                form.year = undefined;
                form.month = undefined;
                form.createTime = "";
                addTime();
              })
              .catch(() => {
                ElMessage.error("添加失败！");
              });
          }
        } else {
          ElMessage.error("信息不完整！");
          return false;
        }
      });
    };
    const addTime = () => {
      let aDate = new Date();
      var day;
      form.month = aDate.getMonth() + 1;
      form.year = aDate.getFullYear();
      day = String(aDate.getDate());
      form.createTime = form.year + "-" + form.month + "-" + day;
    };
    onMounted(() => {
      addTime();
    });
    return {
      ruleFormRef,
      form,
      rules,
      onSubmit,
      state,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  &-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
  }
  &-form {
    margin-left: 20px;
  }
  &-but {
    margin: 20px;
    background: #036eb8;
  }
  &-but:hover {
    background: #95b8e5;
  }
  ::v-deep .el-form-item__label {
    color: #000;
  }
}
</style>
